<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>购票页面</title>
		<link rel="stylesheet" href="resources/layui/css/layui.css">
		<script src="resources/js/jquery-3.7.1.min.js"></script>
		<script src="resources/layui/layui.js"></script>
		<style>
			.main {
				padding: 20px;
			}
			.train-info, .passenger-info, .insurance-info {
				margin-bottom: 20px;
			}
			.train-info h2, .passenger-info h2, .insurance-info h2 {
				font-size: 18px;
				margin-bottom: 10px;
			}
			.train-details, .passenger-details, .insurance-details {
				background-color: #f9f9f9;
				padding: 15px;
				border-radius: 5px;
			}
			.train-details p, .passenger-details p {
				margin: 5px 0;
			}
			.seat-options {
				display: flex;
				justify-content: space-between;
				margin-top: 10px;
			}
			.seat-options div {
				flex: 1;
				text-align: center;
				padding: 10px;
				border: 1px solid #ddd;
				border-radius: 5px;
				margin: 0 5px;
			}
			.seat-options div.available {
				background-color: #e6f7ff;
			}
			.seat-options div.unavailable {
				background-color: #f5f5f5;
				color: #999;
			}
			.passenger-details label {
				display: block;
				margin: 10px 0 5px;
			}
			.passenger-details input {
				width: 100%;
				padding: 5px;
				margin-bottom: 10px;
			}
			.insurance-details {
				display: flex;
				align-items: center;
			}
			.insurance-details input {
				margin-right: 10px;
			}
			.submit-area {
				text-align: center;
				margin-top: 20px;
			}
			.submit-area button {
				margin: 0 10px;
			}
		</style>
	</head>
	<body>
		<div>
			<div id="head12306"></div>
			<div class="main">
				<div class="train-info">
					<h2>列车信息</h2>
					<div class="train-details">
						<p>2025-03-31（周一） G171次 北京南站（06:30开）—福州站（16:23到）</p>
						<div class="seat-options">
							<div class="available">
								<p>二等座</p>
								<p>899.5元</p>
								<p>9.1折 有票</p>
							</div>
							<div class="unavailable">
								<p>商务座</p>
								<p>3310.0元</p>
								<p>9.1折 无票</p>
							</div>
							<div class="unavailable">
								<p>一等座</p>
								<p>41475.0元</p>
								<p>9.3折 无票</p>
							</div>
						</div>
						<p>*显示的价格均为实际活动折扣后票价，供您参考，查看公布票价。具体票价以您确认支付时实际购买的制票票价为准。</p>
					</div>
				</div>

				<div class="passenger-info">
					<h2>乘客信息</h2>
					<div class="passenger-details">
						<label>乘车人</label>
						<input type="text" placeholder="请输入乘车人姓名">
						<label>证件类型</label>
						<select>
							<option value="id_card">居民身份证</option>
							<option value="passport">护照</option>
							<option value="other">其他</option>
						</select>
						<label>证件号码</label>
						<input type="text" placeholder="请输入证件号码">
					</div>
				</div>

				<div class="insurance-info">
					<h2>中国铁路保险</h2>
					<div class="insurance-details">
						<input type="checkbox" id="insurance">
						<label for="insurance">乘坐相伴 安心出行</label>
					</div>
				</div>

				<div class="submit-area">
					<button class="layui-btn layui-btn-primary">上一步</button>
					<button class="layui-btn layui-btn-normal">提交订单</button>
				</div>

				<div class="tips">
					<p>温馨提示：</p>
					<ul>
						<li>一张有效身份证件同一乘车日期同一次只能购买一张车票，高铁动则列车除外。</li>
						<li>购买儿童票时，乘车儿童有有效身份证件的，请填写本人有效身份证件信息。</li>
						<li>购买残疾军人（伤残警察）优待票的，须在购票后、开车前办理换票手续方可进站乘车。</li>
						<li>一天内3次申请车票成功后取消订单（包含无座票时取消5次计为取消1次），当日将不能在12306继续购票。</li>
					</ul>
				</div>
			</div>
			</div>
			<div id="footer"></div>
		</div>
		<script src="resources/layui/layui.js"></script>
		<script>
			function loadComponent(id, url) {
				$("#" + id).load(url);
			}
			loadComponent("head12306", "head_12306");
			loadComponent("footer", "footer");
		</script>
	</body>
</html>